<template>
  <div>
    <nav-bar title="申请返利">
      <img src="../../assets/img/rebate/ic_kefu.png" class="right" slot="right" alt="" @click="$router.push('/custom_center')">
    </nav-bar>
    <rebate-tab-control 
      :currentIndex="currentIndex" 
      :list="['返利申请', '申请记录']"
      @item-click="itemClick"/>
    <div class="content_box">
      <div v-if="currentIndex === 0">
        <rebate-application/>
      </div>
      <div v-else>
        <rebate-record :list="recordList"/>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '../../components/common/navbar/NavBar.vue'
import RebateApplication from './childComps/RebateApplication.vue'
import RebateRecord from './childComps/RebateRecord.vue'
import RebateTabControl from './childComps/RebateTabControl.vue'
export default {
  components: {
    NavBar,
    RebateTabControl,
    RebateApplication,
    RebateRecord,
  },
  data() {
    return {
      currentIndex: 0,
      recordList: [],
    }
  },
  created () {
    this.getRebateList()
  },
  methods: {
    getRebateList() {
      this.axios.get('/rebate_apply_list.json', {}).then(res => {
        this.recordList = res.data.list
      })
    },
    itemClick(e) {
      this.currentIndex = e
    }
  },
}
</script>

<style lang="less" scoped>
.right {
  width: .56rem;
  height: .56rem;
}

.content_box {
  width: 10rem;
  position: fixed;
  top: 2.266667rem;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  overflow: auto;
}

.content_box::-webkit-scrollbar {
  display:none
}
</style>